<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .sullivan-grid {
            margin-left: 100px;
            margin-top: 100px;
            width: 600px;
            height: 600px;
            border: 1px solid red;
            display: grid;
            gap: 6px;
            user-select: none;
            .sullivan-grid-item {
                position: relative;
                border: 1px solid blue;
            }
            .sullivan-grid-item-content {
                position: absolute;
                width: 100%;
                height: 100%;
                border: 1px solid blue;
            }
        }
        .sullivan-grid-item-direction {
            background: rgba(0, 0, 0, .3)
        }
        .sullivan-grid-item-top,
        .sullivan-grid-item-bottom {
            position: absolute;
            height: 10px;
            width: 100%;
            cursor: row-resize;
        }
        .sullivan-grid-item-right,
        .sullivan-grid-item-left {
            position: absolute;
            width: 10px;
            height: 100%;
            cursor: col-resize;
        }
        .sullivan-grid-item-top {
            top: -3px;
        }
        .sullivan-grid-item-right {
            right: -3px;
        }
        .sullivan-grid-item-bottom {
            bottom: -3px;
        }
        .sullivan-grid-item-left {
            left: -3px;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script src="../jquery.js"></script>
<script src="./grid-config.js"></script>
<script src="./utils.js"></script>
<script src="./Grid.js"></script>
<script src="./Position.js"></script>
<script src="./GridEvent.js"></script>
<script>
    let __grid = new Grid((args) => {
        console.log('--------------> ', args)
    })
    const { grid: [row, col], areaLayout } = gridMapOne.pop()
    const $gridBox = __grid.createGridBox([row, col]);
    const area = __grid.createGridArea();
    const activatedMap = new Map();
    let $container = $('#container');
    let __position;

    // 创建布局
    __grid.createGridLayout(area);
    __grid.setGridAreaCss();
    $container?.html($gridBox)

    GridEvent.bind($gridBox)
</script>
</body>
</html>